﻿<title>{$webTitle}-{:config("web_webname")}</title>
<style>
    .chat-message-tips {
        text-align: center;
        line-height:30px;
    }
</style>
<div class="app-header t-v bg-bai dl2 bb b-hui"><span class="header-l t-v nowrap" onclick="ChatClose();"><i
        class="icon icon-pleft f9"></i>返回</span> <span class="header-c t-v t-c nowrap">聊天室</span></div>
<div class="app-content mode-b9 chatscrool bg-bai dk">
    <div class="in-list top" id="chatheight" onclick="$('#chatcon').blur();">
                {$msglist}
            </div>
</div>
<div>
    <audio id="audioPlay">
        <source src="/Static/chat.wav" type="audio/wav">
    </audio>
</div>
<div class="mode-footer w h9 in-text">
    <form action="" onsubmit="return false;">
        <dd><input type="text" class="form w h9 pt0 pb0 r0 b0" id="chatcon"
                   placeholder="请在此输入聊天内容（禁止发广告）"
                   maxlength="{:config('sys_zishu')}"></dd>
        <dt>
            <button class="btn btn-qing btn-md w13 h9 r0 b0" id="lastchat" lastchat=""
                    onclick="ajax_post_chat();">发 送
            </button>
        </dt>
    </form>
</div>
<script>
    var websocket = new WebSocket("{:ws(config('sys_chat_ws'))}");

    function checkSocket() {
        websocket.onopen = function () {
            if (websocket.readyState == 1) {
                ChatStart();
                return true;
            } else {
                ChatError();
                return false;
            }
        };
    }

    function ChatScroolToEnd() {
        var h = $("#chatheight").height() - $(".chatscrool").height(); // 获取总共需要滚动的距离
        var t = h - $(".chatscrool").scrollTop();
        if (t > 1500) {
            $(".chatscrool").scrollTop(h);
        } else if (h > 0) {
            x.scroll('.chatscrool', h, t + 100);
        }
    }

    function ChatClose() {
        //发送退出事件
        sendData({type: 0, uid: '{$userInfo['uid']}', message: '{$userInfo['nickname']} 退出了聊天室'});
        //关闭服务器连接
        websocket.close();
        //关闭页面
        x.mclose();
    }

    function ChatStart() {
        //发送加入事件
        sendData({type: 0, uid: '{$userInfo['uid']}', message: '{$userInfo['nickname']} 进入了聊天室'});
    }

    function ChatError() {
        $('#chatheight').append('<p class="chat-message-tips"><span>连接服务器失败了，请稍后再试</span></p>');
    }


    function ajax_post_chat() {
        var chatcon = x.getval('#chatcon', '请先输入内容!');
        if (!chatcon) return;
        xhr.abort();
        $('#chatcon').focus().val("");
        $.ajax({
            type: 'POST',
            url: '{:url('user_ajax/chat',['act'=>'send'])}',
            dataType: 'json',
            data: {chatcon: chatcon},
            success: function (data) {
                if (data.code === 0) {
                    sendData(data);
                } else if (data.code === -1) {
                    x.msg(data.error);
                }else{
                    $('#chatheight').append('<p class="chat-message-tips"><span style="color: red">' + data.error + '</span></p>');
                    ChatScroolToEnd();
                }
            },
        });
    }

    var clipboard = new Clipboard('.copy');
    clipboard.on('success', function (e) {
        x.msg("复制成功");
    });
    clipboard.on('error', function (e) {
        document.querySelector('.copy');
        x.msg("操作失败");
    });

    websocket.onmessage = function (ev) {
        var data = JSON.parse(ev.data);
        var content;
        switch (data.type) {
            case 0:
                $('#chatheight').append('<p class="chat-message-tips"><span>' + data.message + '</span></p>');
                break;
            case 1:
                if(data.domain == '{:config('web_domain')}'){
					if (data.uid == {$userInfo['uid']}) {
						if (data.zid == {$web_id}) {
							var content = data.Mobile_Msg_my;
						} else {
							var content = '';
						}
					}else{
						if (data.zid == {$web_id}) {
							var content = data.Mobile_Msg_you;
							$('#audioPlay')[0].play();//有其他人的新消息，播放提示音
						} else {
							var content = '';
						}
					}
				}
                break;
        }
        $('#chatheight').append(content);
        ChatScroolToEnd();
    };

    function addFriend(nick, lxqq) {
       //发送添加好友事件
        x.mclose();
        sendData({
            type: 0,
            uid: '{$userInfo['uid']}',
            message: '{$userInfo['nickname']} 已向<span style="color: red">' + nick + '</span>发起了加为QQ好友'
        });
        window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=' + lxqq + '&version=1&src_type=web&web_src=oicqzone.com';
       
    }

    function sendData(str) {
        websocket.send(JSON.stringify(str));
    }

    function chat_mode_footer(nickname, qq) {
        var htmlcon = '';
        htmlcon += '<li><p class="p3 f3 hui">' + nickname + ' 已通过系统秒赞认证，可以放心添加秒赞好友</p></li>';
        htmlcon += '<li><a class="p3 lan bt b-hui footer in" onclick="addFriend(\''+nickname+'\',\''+qq+'\');">加为好友</a></li>';
        htmlcon += '<li><a class="p3 lan bt b-hui footer in" onclick="x.mclose();mode_link_mzrz()">秒赞认证</a></li>';
        x.footer(htmlcon);
    }

    //初始化
    ChatScroolToEnd();
    checkSocket();
    
     if (window.history && window.history.pushState) {
        window.onpopstate = function () {
            ChatClose();
        }
    }

</script>